<template>
	<view class="toast-wrap" v-show="toastList.length > 0">
		<toast-inner  v-for="(item,index) in toastList" :key="item.id" :toastData="item" @close="cleanToastList" @itemClk="toastClick"></toast-inner>
	</view>
</template>

<script>
	import toastInner from './toastInner.vue'
	export default {
		components: {
			toastInner
		},
		data() {
			return {
				tid:0,
				toastList: []
			}
		},
		methods: {
			show(data) {
			  data.id = +new Date()
              this.toastList.push(data)
			},
			cleanToastList(id){
				this.toastList = this.toastList.filter((item)=>{
					return item.id != id
				})
			},
			toastClick(data){
			   this.$emit('toastClk',data)
			}
		}
	}
</script>

<style lang="less" scoped>
	.toast-wrap {
		position: fixed;
		top: 300rpx;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
